<template>
    <div class="Bigbox">
        <div :class="{container:true,panelactive:pannel}" id="container">
        <div class="from_container sign-on">
            <!-- 注册 -->
            <form autocomplete="off" @submit.prevent="onregis" action="#">
                <h1>用户注册</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="iconfont icon-QQ"></i></a>
                    <a href="#" class="social"><i class="iconfont icon-weixin"></i></a>
                    <a href="#" class="social"><i class="iconfont icon-weibo-copy"></i></a>
                    <a href="#" class="social"><i class="iconfont icon-huawei"></i></a>
                </div>
                <span>可以选择以上方式注册</span>
                <input type="text" placeholder="用户名" v-model="user2.username">
                <input type="passwored" placeholder="密码" v-model="user2.password">
                <input type="email" placeholder="邮箱" v-model="user2.email">
                <button type="button" id="send_em">发送验证码</button>
                <input type="code" placeholder="验证码" v-model="user2.code">
                <button type="submit">注册</button>
            </form>
        </div>
        <div class="from_container sign-in">
            <form  autocomplete="off" @submit.prevent="onSubmit" action="#">
                <h1>用户登录</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="iconfont icon-QQ"></i></a>
                    <a href="#" class="social"><i class="iconfont icon-weixin"></i></a>
                    <a href="#" class="social"><i class="iconfont icon-weibo-copy"></i></a>
                    <a href="#" class="social"><i class="iconfont icon-huawei"></i></a>
                </div>
                <span>可以选择以上方式登录</span>
                <input type="text" placeholder="用户名" v-model="user.username">
                <input type="passwored" placeholder="密码" v-model="user.password">
                <a href="#">忘记密码?</a>
                <button type="submit">登录</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="over-panner over-left">
                    <h1>已有帐号?</h1>
                    <p>进行登录</p>
                    <button class="ghost" id="signin" @click="signin">登录</button>
                </div>
                <div class="over-panner over-right">
                    <h1>没有帐号?</h1>
                    <p>进行注册</p>
                    <button class="ghost" id="restin" @click="restin">注册</button>
                </div>
            </div>
        </div>
    </div>
    </div>
    
</template>

<script>
import { mapState,mapMutations } from 'vuex';
export default {
    name:'LogresView',
    data(){
        return{
            pannel:false,
            user:{
                username:'admin',
                password:'123456'
            },
            user2:{
                code:'',
                email:'',
                password:'',
                username:''
            },
        }
    },
    methods:{
        ...mapMutations('userinfo',['getToken','getUserinfo']),
        signin(){
            this.pannel=false
        },
        restin(){
            this.pannel=true
        },
        async onSubmit(){
            console.log(this.user)
            const res = await this.$axios.post("User/login",this.user)
            console.log(res)
            if(res.code==200){
                this.getUserinfo(res.data)
                this.getToken(res.token)
                localStorage.setItem('honey-user',JSON.stringify(res.data))
                localStorage.setItem('token',JSON.stringify(res.token))
                this.$message.success(res.msg)
                this.$router.push('/home')
            }
            else{
                this.$message.error(res.msg)
            }
            // console.log(res.obj.token)
            // this.$store.commit('user/userinfo',{
            //     token:res.obj.token,
            //     userid:res.obj.id
            // })
            // if(res.code==="200"){
            //     this.$message.success("登陆成功");
            //     localStorage.setItem('user',JSON.stringify(res.obj))
            //     this.$router.push("/layout")
            // }
            // else{
            //     this.$message.error(res.msg);
            // }
        },
        // async getemailcode(){
        //     if(!this.user2.email){
        //         this.$message.error("请输入邮箱")
        //         return
        //     }
        //     else if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.user2.email)){
        //         this.$message.error("请输入正确的邮箱")
        //         return
        //     }
        //     else{
        //         const res = await this.$axios.post(`user/Texemail?email=${this.user2.email}`);
        //         if(res.code==="200"){
        //             this.$message.success("发送成功");
        //             console.log(res)
        //         }
        //         else{
        //             this.$message.error("res.msg");
        //         }
        //     }
        // },
        // async onregis(){
        //    const res = await this.$axios.post("/user/regist",this.user2)
        //    if(res.code === "200"){
        //         this.$message.success("注册成功,请登录")
        //         this.pannel=false
        //    }
        //    else{
        //     this.$message.error(res.msg);
        //    }
        // }
    }
}
</script>

<style scoped lang="less">
.Bigbox{
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background: #f8f8f8;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: 100%; */
    margin: 0 auto;
    background-image: url("@/assets/3.jpg");
    background-size: cover;
}
h1{
    margin: 0.2rem;
    font-size: 1.2rem;
}
p{
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 100;
    margin: 1.2rem 0;
    letter-spacing: 0.1rem;
}
span{
    font-size: 0.8rem;
    margin: 1.2rem 0;
}
a{
    color: #333;
    font-size: 1rem;
    text-decoration: none;
}
.container{
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),0 10px 10px rgba(0, 0, 0, 0.22);
    padding: 0.6rem;
    width: 50rem;
    height: 35rem;
    overflow: hidden;
    max-width: 100vw;
    min-height: 70vh;
}
.from_container form{
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 0 1.8rem;
    height: 100%;
    justify-content: center;
    align-items: center;
}
 .social-container{
    margin: 0 0.6rem 0;
}
.social-container a{
    border: 1px solid #eee;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 1.8rem;
    margin: 0 5px;
    width: 1.8rem;
}
.social-container a:hover{
    opacity: 0.8;
}
.from_container input{
    width: 100%;
    height: 2.2rem;
    text-indent: 1rem;
    border: 1px solid #ccc;
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
    margin: 0.6rem 0;
} 
.from_container button:active{
    transform: scale(0.95,0.95);
}
.from_container button{
    padding: 0.4rem 0.6rem;
    background: #417fff;
    color: white;
    border: 1px solid #fff;
    outline: none;
    cursor: pointer;
    width: 5rem;
    border-radius: 8px;
    transition: all 100ms ease-in;
    margin: 0.6rem 0;
    font-size: 00.6rem;
    padding: 0.5rem 0;
}
button #send_em{
    width: 100%;

}
button.ghost{
    background: transparent;
    border-color: #fff;
    border: 1px solid #fff;
    outline: none;
    cursor: pointer;
    width: 5rem;
    border-radius: 8px;
    transition: all 800ms ease-in;
    margin: 0.6rem 0;
    padding: 0.5rem 0;
    color: white;
    font-size: 0.6rem;
}
button.ghost:active{
    transform: scale(0.95,0.95);
}
.from_container{
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.5s ease-in; 
}
 .sign-in{
    left: 0;
    width: 50%;
    z-index: 2;
}
.sign-on{
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}
.overlay{
    background: #417fff;
    width: 200%;
    height: 100%;
    position: relative;
    left: -100%;
    transition: all 0.6s ease-in-out;
    color: white;
}
.overlay-container{
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    transition: all 0.6s ease-in-out;
    overflow: hidden;
    z-index: 99;
}  
.over-panner{
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    padding: 0 2.2rem;

}
.over-right{
    right: 0;
}
.container.panelactive .overlay-container{
    transform: translateX(-100%);
}

.container.panelactive .sign-in{
    transform: translateX(100%);
}
.container.panelactive .sign-on{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    transition: all 0.6s ease-in-out;

}

.container.panelactive .overlay{
    transform: translateX(50%);
}
.container.panelactive .over-left{
    transform: translateX(0);
    transition: all 0.6s ease-in-out;
}
.container.panelactive .over-right{
    transform: translateX(20%);
    transition: all 0.6s ease-in-out;
}
</style>